import { useEffect, useMemo, useState } from 'react';
import { Button, Spin, Tabs, message, Row, Col, Menu, Form, Card, Radio } from 'antd';
import {
  getAssetclassList,
  getAssetproportion,
  getAssetusageList,
  getConsumableList,
  getDeparconsumList,
  getDepartmentalList,
} from '../services/LogOAServices';
import '../common/styles.less';
import * as echarts from 'echarts';
// import { handlCheckManageService as purchaseSourceIntentService } from './HomeContract/mview/HomeIntent/services';

import { IntentTableExtraView } from './IntentTableExtraView';
import { IntentTableBody } from './IntentTableBody';
import React from 'react';
import ReactDOM from 'react-dom';
import { DictionaryRenderFun } from '../../Acommon';

export const EchartList = (curRes) => {
  let Assetstatus: any = React.useRef();
  let Departmental: any = React.useRef();
  let Assetclass: any = React.useRef();
  let Assetusage: any = React.useRef();
  let Consumable: any = React.useRef();
  let Deparconsum: any = React.useRef();

  const [value1, setValue1] = useState('1');
  const [value2, setValue2] = useState('1');
  const [value3, setValue3] = useState('1');
  const [value4, setValue4] = useState('1');
  const [value5, setValue5] = useState('1');
  const [value6, setValue6] = useState('1');
  const [value7, setValue7] = useState('1');
  const [value8, setValue8] = useState('1');

  const value1Style = {
    color: '#6a83fe',
    fontSize: '15px',
    cursor: 'pointer',
  };

  const value1styles = {
    color: '#999',
    fontSize: '12px',
    cursor: 'pointer',
  };

  const getAssetstatus = (value, type) => {
    const array0 = value.data[0].map((obj: any) => {
      let name = obj.name ? obj.name.split('||')[0] : '--';
      return { ...obj, name };
    });
    const array1 = value.data[1].map((obj: any) => {
      let name = obj.name ? obj.name.split('||')[0] : '--';
      return { ...obj, name };
    });
    const chartDom: any = ReactDOM.findDOMNode(Assetstatus?.current);
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        icon: 'circle',
        right: '10%',
        top: 'center',
        width: 250,
        height: 230,
        itemGap: 20,
        x: '80%',
        orient: 'vertical',
      },
      backgroundColor: '#fff',
      series: [
        {
          name: '',
          type: 'pie',
          radius: '85%',
          center: ['30%', '50%'],
          data: type == '1' ? array0 : array1,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          label: {
            fontSize: 12, // 缩小字体大小
          },
        },
      ],
    };
    myChart.setOption(option);
  };

  const getDepartmental = (value, type) => {
    const chartDom: any = ReactDOM.findDOMNode(Departmental?.current);
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        icon: 'circle',
        right: '10%',
        top: 'center',
        width: 250,
        height: 300,
        itemGap: 20,
        x: '80%',
        orient: 'vertical',
      },
      backgroundColor: '#fff',
      series: [
        {
          name: '',
          type: 'pie',
          radius: '85%',
          center: ['30%', '50%'],
          data: type == '1' ? value.data[0] : value.data[1],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          label: {
            fontSize: 12, // 缩小字体大小
          },
        },
      ],
    };
    myChart.setOption(option);
  };

  const getAssetclass = (value, type) => {
    const array: any = [];
    const array2: any = [];
    if (type == '1') {
      for (let index = 0; index < value.data[0].length; index++) {
        const element: any = value.data[0][index];
        array.push(element?.name.split('||')[0]);
        array2.push(element?.value);
      }
    } else if (type == '2') {
      for (let index = 0; index < value.data[1].length; index++) {
        const element: any = value.data[1][index];
        array.push(element?.name.split('||')[0]);
        array2.push(element?.value);
      }
    }
    const chartDom: any = ReactDOM.findDOMNode(Assetclass?.current);
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: array,
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          name: '',
          type: 'bar',
          barWidth: '60%',
          data: array2,
        },
      ],
    };
    myChart.setOption(option);
  };

  const getAssetusage = (value, type) => {
    const array: any = [];
    const array2: any = [];
    if (type == '1') {
      for (let index = 0; index < value.data[0]?.length; index++) {
        const element: any = value.data[0][index];
        array.push(element?.name.split('||')[0]);
        array2.push(element?.value);
      }
    } else if (type == '2') {
      for (let index = 0; index < value.data[1]?.length; index++) {
        const element: any = value.data[1][index];
        array.push(element?.name.split('||')[0]);
        array2.push(element?.value);
      }
    }
    const chartDom: any = ReactDOM.findDOMNode(Assetusage?.current);
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: array,
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          name: '',
          type: 'bar',
          barWidth: '60%',
          data: array2,
        },
      ],
    };
    myChart.setOption(option);
  };

  const getConsumable = (value, type) => {
    const array: any = [];
    const array2: any = [];
    if (type == '1') {
      for (let index = 0; index < value.num?.length; index++) {
        const element: any = value.num[index];
        array.push({
          type: 'line',
          stack: 'Total',
          data: element.date,
          name: element.name.split('||')[0],
        });
        array2.push(element.name.split('||')[0]);
      }
    } else if (type == '2') {
      for (let index = 0; index < value.amount?.length; index++) {
        const element: any = value.amount[index];
        array.push({
          type: 'line',
          stack: 'Total',
          data: element.date,
          name: element.name.split('||')[0],
        });
        array2.push(element.name.split('||')[0]);
      }
    }
    const chartDom: any = ReactDOM.findDOMNode(Consumable?.current);
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      tooltip: {
        trigger: 'axis',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      legend: {
        data: array2,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: value.legend,
      },
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: array,
    };
    myChart.setOption(option);
  };

  const getDeparconsum = (value, type) => {
    const array0 = value.data[0].map((obj: any) => {
      let name = obj.name ? obj.name.split('||')[0] : '--';
      return { ...obj, name };
    });
    const array1 = value.data[1].map((obj: any) => {
      let name = obj.name ? obj.name.split('||')[0] : '--';
      return { ...obj, name };
    });
    const chartDom: any = ReactDOM.findDOMNode(Deparconsum?.current);
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        icon: 'circle',
        right: '10%',
        top: 'center',
        width: 300,
        height: 300,
        itemGap: 20,
        x: '75%',
        orient: 'vertical',
      },
      backgroundColor: '#fff',
      series: [
        {
          name: '',
          type: 'pie',
          radius: '85%',
          center: ['30%', '50%'],
          data: type == '1' ? array0 : array1,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          label: {
            fontSize: 12, // 缩小字体大小
          },
        },
      ],
    };
    myChart.setOption(option);
  };

  // 资产状态接口
  const { Assetproportiondata } = getAssetproportion(curRes.curRes);
  // 耗材分类情况
  const { DepartmentalData } = getDepartmentalList(curRes.curRes);
  // 资产分类统计
  const { AssetclassData } = getAssetclassList(curRes.curRes);
  // 资产使用情况
  const { AssetusageData } = getAssetusageList(curRes.curRes);
  // 耗材领用情况
  const { ConsumableData } = getConsumableList(curRes.curRes);
  // 资产区域统计
  const { DeparconsumData } = getDeparconsumList(curRes.curRes);

  // 资产状态占比初始化
  useEffect(() => {
    if (Assetproportiondata?.msgFlag) {
      getAssetstatus(Assetproportiondata.obj, value1);
    }
  }, [Assetstatus, Assetproportiondata]);

  // 部门使用占比初始化
  useEffect(() => {
    if (DepartmentalData?.msgFlag) {
      getDepartmental(DepartmentalData.obj, value2);
    }
  }, [Departmental, DepartmentalData]);

  // 资产分类统计初始化
  useEffect(() => {
    if (AssetclassData?.msgFlag) {
      getAssetclass(AssetclassData.obj, value3);
    }
  }, [Assetclass, AssetclassData]);

  // 资产使用情况
  useEffect(() => {
    if (AssetusageData?.msgFlag) {
      getAssetusage(AssetusageData.obj, value4);
    }
  }, [Assetusage, AssetusageData]);

  // 耗材领用情况
  useEffect(() => {
    if (ConsumableData?.msgFlag) {
      getConsumable(ConsumableData.obj, value4);
    }
  }, [Consumable, ConsumableData]);

  // 部门耗材占比
  useEffect(() => {
    if (DeparconsumData?.msgFlag) {
      getDeparconsum(DeparconsumData.obj, value4);
    }
  }, [Deparconsum, DeparconsumData]);

  useEffect(() => {
    setTimeout(() => {
      let cardHead: any = document.getElementsByClassName('ant-card-head');
      if (cardHead.length > 0) {
        for (let index = 0; index < cardHead.length; index++) {
          const element = cardHead[index];
          element.style.borderRadius = '10px 10px 0px 0px';
        }
      }
    }, 1000);
  }, []);

  const consume3 = (data) => {
    let obj: any = JSON.parse(JSON.stringify(data));
    let num;
    let now = new Date();
    let year = now.getFullYear();
    let month: any = now.getMonth() + 1;
    if (month < 10) {
      month = '0' + month;
    }
    const date = year + '-' + month;
    for (let index = 0; index < obj.legend.length; index++) {
      const element = obj.legend[index];
      if (element == date) {
        num = index;
        let array: any = [];
        array.push(obj.legend[index - 2]);
        array.push(obj.legend[index - 1]);
        array.push(element);
        obj.legend = array;
      }
    }
    for (let index = 0; index < obj.amount.length; index++) {
      const element = obj.amount[index];
      element.date = [element.date[num - 2], element.date[num - 1], element.date[num]];
    }
    for (let index = 0; index < obj.num.length; index++) {
      const element = obj.num[index];
      element.date = [element.date[num - 2], element.date[num - 1], element.date[num]];
    }
    return obj;
  };

  const consume1 = (data) => {
    let obj: any = JSON.parse(JSON.stringify(data));
    let num;
    let now = new Date();
    let year = now.getFullYear();
    let month: any = now.getMonth() + 1;
    if (month < 10) {
      month = '0' + month;
    }
    const date = year + '-' + month;
    for (let index = 0; index < obj.legend.length; index++) {
      const element = obj.legend[index];
      if (element == date) {
        num = index;
        let array: any = [];
        array.push(element);
        obj.legend = array;
      }
    }
    for (let index = 0; index < obj.amount.length; index++) {
      const element = obj.amount[index];
      element.date = [element.date[num]];
    }
    for (let index = 0; index < obj.num.length; index++) {
      const element = obj.num[index];
      element.date = [element.date[num]];
    }
    return obj;
  };

  const property1 = (data) => {
    let obj: any = {
      data: [[], []],
    };
    let now = new Date();
    let year = now.getFullYear();
    let month: any = now.getMonth() + 1;
    if (month < 10) {
      month = '0' + month;
    }
    const date = year + '-' + month;
    for (let index = 0; index < data.data[0].length; index++) {
      const element = data.data[0][index];
      if (element.name == date) {
        obj.data[0].push(data.data[0][index - 2]);
        obj.data[0].push(data.data[0][index - 1]);
        obj.data[0].push(element);
      }
    }
    for (let index = 0; index < data.data[1].length; index++) {
      const element = data.data[1][index];
      if (element.name == date) {
        obj.data[1].push(data.data[1][index - 2]);
        obj.data[1].push(data.data[1][index - 1]);
        obj.data[1].push(element);
      }
    }

    return obj;
  };

  const property2 = (data) => {
    let obj: any = {
      data: [[], []],
    };
    let now = new Date();
    let year = now.getFullYear();
    let month: any = now.getMonth() + 1;
    if (month < 10) {
      month = '0' + month;
    }
    const date = year + '-' + month;
    for (let index = 0; index < data.data[0].length; index++) {
      const element = data.data[0][index];
      if (element.name == date) {
        obj.data[0].push(element);
      }
    }
    for (let index = 0; index < data.data[1].length; index++) {
      const element = data.data[1][index];
      if (element.name == date) {
        obj.data[1].push(element);
      }
    }

    return obj;
  };

  return (
    <>
      <Row gutter={[8, 8]} style={{ marginBottom: 8 }}>
        <Col span={12}>
          <Card bordered={false} style={{ borderRadius: '10px' }} title={Assetproportiondata?.obj?.title}>
            <div ref={Assetstatus} style={{ width: '100%', height: '300px' }}></div>
            <div style={{ textAlign: 'right' }}>
              <span style={{ marginRight: '15px' }}>
                <span
                  onClick={() => {
                    setValue1('1');
                    if (Assetproportiondata?.msgFlag) {
                      const value: any = '1';
                      getAssetstatus(Assetproportiondata.obj, value);
                    }
                  }}
                  style={value1 == '1' ? value1Style : value1styles}
                >
                  数据
                </span>
              </span>
              <span
                onClick={() => {
                  setValue1('2');
                  if (Assetproportiondata?.msgFlag) {
                    const value: any = '2';
                    getAssetstatus(Assetproportiondata.obj, value);
                  }
                }}
                style={value1 == '2' ? value1Style : value1styles}
              >
                金额
              </span>
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card bordered={false} style={{ borderRadius: '10px' }} title={DepartmentalData?.obj?.title}>
            <div ref={Departmental} style={{ width: '100%', height: '300px' }}></div>
            <div style={{ textAlign: 'right' }}>
              <span style={{ marginRight: '15px' }}>
                <span
                  onClick={() => {
                    setValue2('1');
                    if (DepartmentalData?.msgFlag) {
                      const value: any = '1';
                      getDepartmental(DepartmentalData.obj, value);
                    }
                  }}
                  style={value2 == '1' ? value1Style : value1styles}
                >
                  数据
                </span>
              </span>
              <span
                onClick={() => {
                  setValue2('2');
                  if (DepartmentalData?.msgFlag) {
                    const value: any = '2';
                    getDepartmental(DepartmentalData.obj, value);
                  }
                }}
                style={value2 == '2' ? value1Style : value1styles}
              >
                金额
              </span>
            </div>
          </Card>
        </Col>
      </Row>
      <Row gutter={[8, 8]} style={{ marginBottom: 8 }}>
        <Col span={12}>
          <Card bordered={false} style={{ borderRadius: '10px' }} title={ConsumableData?.obj?.title}>
            <div style={{ textAlign: 'left' }}>
              <span style={{ marginRight: '15px' }}>
                <span
                  onClick={() => {
                    setValue8('1');
                    if (ConsumableData?.msgFlag) {
                      getConsumable(ConsumableData.obj, value5);
                    }
                  }}
                  style={value8 == '1' ? value1Style : value1styles}
                >
                  最近一年
                </span>
              </span>
              <span style={{ marginRight: '15px' }}>
                <span
                  onClick={() => {
                    setValue8('2');
                    if (ConsumableData?.msgFlag) {
                      let obj = consume3(ConsumableData.obj);
                      getConsumable(obj, value5);
                    }
                  }}
                  style={value8 == '2' ? value1Style : value1styles}
                >
                  最近三个月
                </span>
              </span>
              <span
                onClick={() => {
                  setValue8('3');
                  if (ConsumableData?.msgFlag) {
                    let obj = consume1(ConsumableData.obj);
                    getConsumable(obj, value5);
                  }
                }}
                style={value8 == '3' ? value1Style : value1styles}
              >
                最近一个月
              </span>
            </div>
            <div ref={Consumable} style={{ width: '100%', height: '300px' }}></div>
            <div style={{ textAlign: 'right' }}>
              <span style={{ marginRight: '15px' }}>
                <span
                  onClick={() => {
                    setValue5('1');
                    if (ConsumableData?.msgFlag) {
                      if (value8 == '2') {
                        const value: any = '1';
                        let obj = consume3(ConsumableData.obj);
                        getConsumable(obj, value);
                      } else if (value8 == '3') {
                        const value: any = '1';
                        let obj = consume1(ConsumableData.obj);
                        getConsumable(obj, value);
                      } else {
                        const value: any = '1';
                        getConsumable(ConsumableData.obj, value);
                      }
                    }
                  }}
                  style={value5 == '1' ? value1Style : value1styles}
                >
                  数据
                </span>
              </span>
              <span
                onClick={() => {
                  setValue5('2');
                  if (ConsumableData?.msgFlag) {
                    if (value8 == '2') {
                      const value: any = '2';
                      let obj = consume3(ConsumableData.obj);
                      getConsumable(obj, value);
                    } else if (value8 == '3') {
                      const value: any = '2';
                      let obj = consume1(ConsumableData.obj);
                      getConsumable(obj, value);
                    } else {
                      const value: any = '2';
                      getConsumable(ConsumableData.obj, value);
                    }
                  }
                }}
                style={value5 == '2' ? value1Style : value1styles}
              >
                金额
              </span>
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card bordered={false} style={{ borderRadius: '10px' }} title={AssetusageData?.obj?.title}>
            <div style={{ textAlign: 'left' }}>
              <span style={{ marginRight: '15px' }}>
                <span
                  onClick={() => {
                    setValue7('1');
                    if (AssetusageData?.msgFlag) {
                      getAssetusage(AssetusageData.obj, value4);
                    }
                  }}
                  style={value7 == '1' ? value1Style : value1styles}
                >
                  最近一年
                </span>
              </span>
              <span style={{ marginRight: '15px' }}>
                <span
                  onClick={() => {
                    setValue7('2');
                    if (AssetusageData?.msgFlag) {
                      let obj = property1(AssetusageData.obj);
                      getAssetusage(obj, value4);
                    }
                  }}
                  style={value7 == '2' ? value1Style : value1styles}
                >
                  最近三个月
                </span>
              </span>
              <span
                onClick={() => {
                  setValue7('3');
                  if (AssetusageData?.msgFlag) {
                    let obj = property2(AssetusageData.obj);
                    getAssetusage(obj, value4);
                  }
                }}
                style={value7 == '3' ? value1Style : value1styles}
              >
                最近一个月
              </span>
            </div>
            <div ref={Assetusage} style={{ width: '100%', height: '300px' }}></div>
            <div style={{ textAlign: 'right' }}>
              <span style={{ marginRight: '15px' }}>
                <span
                  onClick={() => {
                    setValue4('1');
                    if (AssetusageData?.msgFlag) {
                      if (value7 == '3') {
                        const value: any = '1';
                        let obj = property2(AssetusageData.obj);
                        getAssetusage(obj, value);
                      } else if (value7 == '2') {
                        const value: any = '1';
                        let obj = property1(AssetusageData.obj);
                        getAssetusage(obj, value);
                      } else {
                        const value: any = '1';
                        getAssetusage(AssetusageData.obj, value);
                      }
                    }
                  }}
                  style={value4 == '1' ? value1Style : value1styles}
                >
                  数据
                </span>
              </span>
              <span
                onClick={() => {
                  setValue4('2');
                  if (AssetusageData?.msgFlag) {
                    if (value7 == '3') {
                      const value: any = '2';
                      let obj = property2(AssetusageData.obj);
                      getAssetusage(obj, value);
                    } else if (value7 == '2') {
                      const value: any = '2';
                      let obj = property1(AssetusageData.obj);
                      getAssetusage(obj, value);
                    } else {
                      const value: any = '2';
                      getAssetusage(AssetusageData.obj, value);
                    }
                  }
                }}
                style={value4 == '2' ? value1Style : value1styles}
              >
                金额
              </span>
            </div>
          </Card>
        </Col>
      </Row>
      <Row gutter={[8, 8]} style={{ marginBottom: 8 }}>
        <Col span={12}>
          <Card bordered={false} style={{ borderRadius: '10px' }} title={AssetclassData?.obj?.title}>
            <div ref={Assetclass} style={{ width: '100%', height: '300px' }}></div>
            <div style={{ textAlign: 'right' }}>
              <span style={{ marginRight: '15px' }}>
                <span
                  onClick={() => {
                    setValue3('1');
                    if (AssetclassData?.msgFlag) {
                      const value: any = '1';
                      getAssetclass(AssetclassData.obj, value);
                    }
                  }}
                  style={value3 == '1' ? value1Style : value1styles}
                >
                  数据
                </span>
              </span>
              <span
                onClick={() => {
                  setValue3('2');
                  if (AssetclassData?.msgFlag) {
                    const value: any = '2';
                    getAssetclass(AssetclassData.obj, value);
                  }
                }}
                style={value3 == '2' ? value1Style : value1styles}
              >
                金额
              </span>
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card bordered={false} style={{ borderRadius: '10px' }} title={DeparconsumData?.obj?.title}>
            <div ref={Deparconsum} style={{ width: '100%', height: '300px' }}></div>
            <div style={{ textAlign: 'right' }}>
              <span style={{ marginRight: '15px' }}>
                <span
                  onClick={() => {
                    setValue6('1');
                    if (DeparconsumData?.msgFlag) {
                      const value: any = '1';
                      getDeparconsum(DeparconsumData.obj, value);
                    }
                  }}
                  style={value6 == '1' ? value1Style : value1styles}
                >
                  数据
                </span>
              </span>
              <span
                onClick={() => {
                  setValue6('2');
                  if (DeparconsumData?.msgFlag) {
                    const value: any = '2';
                    getDeparconsum(DeparconsumData.obj, value);
                  }
                }}
                style={value6 == '2' ? value1Style : value1styles}
              >
                金额
              </span>
            </div>
          </Card>
        </Col>
      </Row>
    </>
  );
};
